<style lang="less">
  .f-w70{
    width: 70% !important;
  }
</style>
<template>
  <div>

    <el-row>
      <el-col :span="8"><div class="grid-content">
        评价时间 ：
        <el-date-picker class="f-w70"
          v-model="searchDate"
          type="daterange"
          placeholder="选择日期">
        </el-date-picker>
      </div></el-col>
      <el-col :span="8"><div class="grid-content">整体评价 ：
        <el-select class="f-w70"  v-model="searchForm.overallEvaluation"
                   placeholder="请选择">
          <el-option
            v-for="item in $store.getters.ORDER_OVERALL_EVALUATION"
            :key="item.dictVal"
            :label="item.cnDictValname"
            :value="item.dictVal">
          </el-option>
        </el-select>
      </div></el-col>
      <el-col :span="8"><div class="grid-content">订单编号 ：
        <el-input class="f-w70" v-model="searchForm.orderNumber" placeholder="请输入订单编号"></el-input>
      </div></el-col>
    </el-row>
    <br>
    <div class="f-mt f-wa" style="height: 35px">
      <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20" @click="reset()">重置</el-button>
      <el-button type="primary" class="f-wa f-fr f-ml10 "  @click="searchFormClick()">查询</el-button>
    </div>
    <el-table :data="evaluationData" border style="width: 100%;">
      <el-table-column prop="evaluationTime" label="评价时间"  style="width: 9%;"></el-table-column>
      <el-table-column prop="overallEvaluation" label="整体评价"  style="width: 5%;" >
        <template slot-scope="scope">
          <label v-if="scope.row.overallEvaluation === 101021001">
            好评
          </label>
          <label v-if="scope.row.overallEvaluation === 101021002">
            中评
          </label>
          <label v-if="scope.row.overallEvaluation === 101021003">
            差评
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="overallRating" label="综合评分" width="100px" ></el-table-column>
      <el-table-column prop="transportTime" label="运输时效"  width="100px" ></el-table-column>
      <el-table-column prop="transportPrice" label="运输价格"  width="100px"  ></el-table-column>
      <el-table-column prop="customerServiceAttitude" label="客服态度"  width="100px"  ></el-table-column>
      <el-table-column prop="cargoSecurity" label="货物保障"  width="100px"  ></el-table-column>
      <el-table-column prop="evaluationDescription" label="评价内容" style="width: 10%;" ></el-table-column>
      <el-table-column prop="orderApp.orderNumber" label="订单编号" style="width: 10%;" >
        <template slot-scope="scope">
            <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
               @click="orderSelectDialog(scope.row.orderApp)">
              {{scope.row.orderApp.orderNumber}}
            </a>
        </template>
      </el-table-column>
      <el-table-column prop="orderApp.agingName" label="运输方式" style="width: 10%;" ></el-table-column>
      <el-table-column prop="orderApp.paymentTypeName" label="结算方式" style="width: 10%;" ></el-table-column>
      <el-table-column prop="shipInfo" label="发货信息" width="200px" >
        <template slot-scope="scope">
          <label v-if="scope.row.shipInfo !== null || scope.row.shipInfo !== '' || scope.row.shipInfo !== undefined">
            {{scope.row.shipInfo}}<br>
          </label>
          <label v-if="scope.row.shipAddress !== null || scope.row.shipAddress !== '' || scope.row.shipAddress !== undefined">
            {{scope.row.shipAddress}}件<br>
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="receiptInfo" label="收货信息" width="200px" >
        <template slot-scope="scope">
          <label v-if="scope.row.receiptInfo !== null || scope.row.receiptInfo !== '' || scope.row.receiptInfo !== undefined">
            {{scope.row.receiptInfo}}<br>
          </label>
          <label v-if="scope.row.receiptAddress !== null || scope.row.receiptAddress !== '' || scope.row.receiptAddress !== undefined">
            {{scope.row.receiptAddress}}件<br>
          </label>
        </template>
      </el-table-column>
      <el-table-column label="货物信息" style="width: 20%;" >
        <template slot-scope="scope">
          <label v-if="scope.row.orderApp.cargoNames !== null || scope.row.orderApp.cargoNames !== '' || scope.row.orderApp.cargoNames !== undefined">
            {{scope.row.orderApp.cargoNames}}<br>
          </label>
          <label v-if="scope.row.orderApp.amount !== null || scope.row.orderApp.amount !== '' || scope.row.orderApp.amount !== undefined">
            {{scope.row.orderApp.amount}}件<br>
          </label>
          <label v-if="scope.row.orderApp.weight !== null || scope.row.orderApp.weight !== '' || scope.row.orderApp.weight !== undefined">
            {{scope.row.orderApp.weight}}吨<br>
          </label>
          <label v-if="scope.row.orderApp.volume !== null || scope.row.orderApp.volume !== '' || scope.row.orderApp.volume !== undefined">
            {{scope.row.orderApp.volume}}方<br>
          </label>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="f-mt10"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total,sizes,prev, pager, next, jumper"
                   :total="total" style="float: right">
    </el-pagination>

    <!--订单查看Dialog-->
    <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
      <order-select :title="orderSelectForm"></order-select>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderEvaluations
} from '../../api/order/OrderEvaluation';
import {
  resetObjNull,
  isEmpty
} from '../../lib/util';
import OrderSelect from './OrderSelectDialog.vue';

export default {
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      orderSelect: false,
      orderSelectForm: {},
      searchDate: [],
      searchForm: {
        overallEvaluation: '',
        orderNumber: ''
      },
      evaluationData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      param: {
        filters: '',
        sorts: '',
        size: 15,
        page: 1
      }
    };
  },
  methods: {
    /**
       * 查看订单
       */
    orderSelectDialog (val) {
      this.orderSelect = true;
      this.orderSelectForm = val;
    },
    searchFormClick () {
      let filters = '';
      if (!isEmpty(this.searchDate)) {
        filters += 'GT_evaluationTime=' + this.searchDate[0].toJSON().substring(0, 10) + ';';
        filters += 'LT_evaluationTime=' + this.searchDate[1].toJSON().substring(0, 10) + ';';
      }
      if (!isEmpty(this.searchForm.overallEvaluation)) {
        filters += 'EQ_overallEvaluation=' + this.searchForm.overallEvaluation + ';';
      }
      if (!isEmpty(this.searchForm.orderNumber)) {
        filters += 'LIKE_order.orderNumber=' + this.searchForm.orderNumber + ';';
      }
      this.param.filters = filters;
      getOrderEvaluations(this.param).then((res) => {
        if (res.data.successFlg) {
          this.evaluationData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        } else {
          this.evaluationData = [];
        }
      }).catch(function (error) {
        this.$message.error('更新失败:' + error);
      });
    },
    reset () {
      this.searchDate = [];
      resetObjNull(this.searchForm);
    },
    init () {
      getOrderEvaluations(this.param).then((res) => {
        if (res.data.successFlg) {
          this.evaluationData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
      });
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
    }
  },
  // 初始化数据
  mounted () {
    this.init();
    this.$store.commit('initDict');
  }
};
</script>
